<template>
	<view class="content">
		<view @click="testReset">这是瀑布流组件：点击测试重新渲染</view>
		<!-- PS 第一种瀑布流实现方式已弃用，目前还是有BUG的，只是当初练习用，正式用请用waterfall-flow2组件，持续维护 -->
		<waterfall-flow1 :list="list" ref="myWaterfallFlow" @load="load" @clickImage="clickImage" @clickItem="clickItem">
			<view class="item" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
				<view>{{ item.text }}</view>
			</view>
		</waterfall-flow1>
		<view @click="testPush">我已经到页面底部了：点击测试数组追加</view>
	</view>
</template>

<script>
import waterfallFlow1 from '@/components/waterfall-flow1.vue';

export default {
	components: {
		waterfallFlow1
	},
	data() {
		return {
			list: []
		}
	},
	onLoad() {
		setTimeout(() => {
			this.list.push({
				id: 1,
				image: 'https://picsum.photos/200/400',
				text: '我有一直小毛驴，但我从来也不骑'
			},{
				id: 2,
				image: 'https://picsum.photos/200/300',
				text: '小啊小二郎，背着书包上学堂'
			},{
				id: 3,
				image: 'https://picsum.photos/200/300',
				text: '从前山里有座庙，庙里有个老和尚'
			},{
				id: 4,
				image: 'https://picsum.photos/200/340',
				text: '鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波'
			},{
				id: 5,
				image: 'https://picsum.photos/200/500',
				text: '啦啦啦，我是快乐的小行家'
			},{
				id: 6,
				image: 'https://picsum.photos/200/410',
				text: '皮卡丘，十万伏特'
			})
		}, 1000);
	},
	methods: {
		load(event) {
			console.log("加载完毕", event);
		},
		testReset() {
			this.$refs.myWaterfallFlow.update();
		},
		testPush() {
			this.list.push({
				id: 7,
				image: 'https://picsum.photos/200/400',
				text: '我有一直小毛驴，但我从来也不骑'
			},{
				id: 8,
				image: 'https://picsum.photos/200/300',
				text: '小啊小二郎，背着书包上学堂'
			},{
				id: 9,
				image: 'https://picsum.photos/200/300',
				text: '从前山里有座庙，庙里有个老和尚'
			});
		},
		clickImage(event) {
			console.log("event.clickImage", event)
		},
		clickItem(event) {
			console.log("event.clickItem", event)
		}
	}
}
</script>

<style scoped>
.content {
	width: 750rpx;
	height: max-content;
	padding: 20rpx;
	box-sizing: border-box;
}
.item {
	background-color: pink;
}
</style>
